<template>
  <view>
    <view class="orderDetails-cent">
      <view class="orderState">
        <view class="flt-fl">{{orderData.orderStatusName}}</view>
        <view class="flt-fr" v-if="orderData.orderStatus == 0">
          <text class="">支付剩余时间</text>
          {{countDown}}
        </view>
      </view>
      <view class="information mgt24">
        <view class="information-cent">
          <view class="my-information">
            {{orderData.name}}
            <text>{{orderData.mobile}}</text>
          </view>
          <view class="address">地址：{{orderData.address}}</view>
        </view>
      </view>
      <view class="commodity mgt24">
        <view class="title"><text>采购</text></view>
        <view class="commoditylist" v-for="(item,index) in orderData.orderDetails" :key="index">
          <view class="img"><image :src="item.productMainUrl"></image></view>
          <view class="commoditylist-text">
            <view class="commodity-information">
              <view class="commodity-title text2Ellipsis">{{item.productTitle}}</view>
              <view class="commodity-Model">{{item.productSpecName}}</view>
            </view>
            <view class="commodity-Price">
              <view class="Price">
                <text>¥</text>
                {{item.price}}
              </view>  
              <view class="number">共{{item.quantity}}件</view>
            </view>
          </view>
          <view class="list_d">
            <view class="btn white" v-if="item.orderStatus == 3" @click="logistics(item)"><text>物流跟踪</text></view>
            <view class="btn" v-if="item.orderStatus == 3" @click="sureHarvest(item)"><text>确认收货</text></view>
            <view class="btn white" v-if="item.orderStatus == 4"><text>已收货</text></view>
          </view>
        </view>
        <view class="Remarks">
          <view class="Remarks-title">订单备注</view>
          <view class="Remarks-text">{{orderData.remark}}</view>
        </view>
      </view>
      <view class="PriceDetails mgt24">
        <view class="PriceDetails-li">
          <view class="PriceDetails-title flt-fl">订单总额</view>
          <view class="PriceDetails-text flt-fr">￥{{orderData.productTotalPrices | current}}</view>
        </view>
        <view class="PriceDetails-li">
          <view class="PriceDetails-title flt-fl">配送费</view>
          <view class="PriceDetails-text flt-fr">￥{{orderData.postage| current}}</view>
        </view>
        <!-- 重新选择券 开始-->
        <view v-if="orderData.orderStatus==0">
          <view class="PriceDetails-li" v-if="postageData.userCashCoupon > 0 && postageData.cashUsed == 0">
            <view class="PriceDetails-title flt-fl">当前可用{{postageData.userCashCoupon}}现金券抵现</view>
            <view class="PriceDetails-text flt-fr">
              <text class="color" v-if="isUseCash">
                -￥{{(postageData.userCashCoupon>(postageData.totalMoney+postageData.postageFee)?postageData.totalMoney+postageData.postageFee:postageData.userCashCoupon) | current}}
              </text>
              <view class="switch flt-fr">
                <switch  :color="color" style="transform:scale(0.7)" @change="cashChange" :checked="isUseCash" :disabled="postageData.cashUsed > 0"/>
              </view>
            </view>
          </view>
          <view class="PriceDetails-li" v-if="orderData.cashUsed > 0">
            <view class="PriceDetails-title flt-fl">现金券抵扣</view>
            <view class="PriceDetails-text flt-fr">
              <text>-￥{{postageData.cashUsed | current}}</text>
            </view>
          </view>
        </view>
        <!-- 重新选择券 结束-->
        <view class="PriceDetails-li" v-if="orderData.orderStatus != 0 && orderData.cashUsed > 0">
          <view class="PriceDetails-title flt-fl">现金券抵扣</view>
          <view class="PriceDetails-text flt-fr">
            <text class="color">-￥{{orderData.cashUsed}}</text>
            <view class="switch flt-fr">
              <!-- <switch checked :color="color" style="transform:scale(0.7)" @change="switch1Change" /> -->
            </view>
          </view>
        </view>
        <!-- 如果采用过第三方支付 选择过券 结束-->
        <view class="PriceDetails-li text-right" v-if="orderData.orderStatus !=1">
          <view class="PriceDetails-text flt-fr">
            <text>需付款：</text>
            <text class="color-text">￥{{((computeMoney<0) ? 0 : computeMoney) | current}}</text>
          </view>
        </view>
        <view class="PriceDetails-li"  v-if="orderData.orderStatus==1">
          <view class="PriceDetails-title flt-fl">实付金额</view>
          <view class="PriceDetails-text flt-fr">
            <text class="color-text">￥{{computeMoney | current}}</text>
          </view>
        </view>
      </view>
      <view class="orderInformation mgt24 mgb24">
        <view class="orderInformation-li">
          <view class="orderInformation-title">订单编号：</view>
          <view class="orderInformation-text">
            <text>{{orderData.orderDetailSn}}</text>
            <text class="copy" @click="copyOrder(orderData.orderDetailSn)">复制</text>
            <!-- <text class="copy" v-clipboard:success="copyOrder(orderData.orderDetailSn)">复制</text> -->
          </view>
        </view>
        <view class="orderInformation-li">
          <view class="orderInformation-title">下单时间：</view>
          <view class="orderInformation-text">
            {{orderData.createTime}}
          </view>
        </view>
        <view class="orderInformation-li" v-if="payType">
          <view class="orderInformation-title">支付方式：</view>
          <view class="orderInformation-text">
            {{payType}}
          </view>
        </view>
        <view class="orderInformation-li" v-if="orderData.payTime">
          <view class="orderInformation-title">支付时间：</view>
          <view class="orderInformation-text">
            {{orderData.payTime}}
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-button" v-if="orderData.orderStatus==0 || orderData.orderStatus !==3 || orderData.orderStatus !== 4">
      <view class="cancel" v-if="orderData.orderStatus==0" @click="cancelOrders"><text>取消订单</text></view>
      <view class="payment comBtn color2" v-if="orderData.orderStatus==0" @click="payClick"><text>去支付</text></view>
      <view class="cancel" v-if="orderData.orderStatus==5 || orderData.orderStatus==6" @click="delectCurOrders"><text>删除订单</text></view>
    </view>
    
    <common-pop :baseInfo="commonPopInfo" @cancelPop="cancelComPop" @doSure="delectCartGoods"></common-pop>
  </view>
</template>
<script>
import { orderDetail, cancelOrder, OrderCost, confirmOrder, deleteOrder } from '@/service/purchaseShop/order.service.js'
import commonPop from '@/components/common-pop/index.vue'
export default {
  components: {commonPop},
  data() {
    return {
      color:"#4CD964",
      orderId: '', // 订单id
      orderData: '',
      postageData: '',
      payType: '',
      totalMoney: '',
      isUseCoupon: false,
      isUseCash: false,
      couponStatus: {
        cash: 0,
        integral: 0,
        discount: 0
      },
      goodType: 1,
      countDown: '00:00',
      timers: null,
      countTotalMoney: '',
      computeMoney: '',
      commonPopInfo: {
        title: '确认取消该订单吗？',
        cancel: '取消',
        sure: '确定',
        show: false
      },
      orderIndex: ''
    };
  },
  onLoad (options) {
    this.orderId = options.id // 订单id
    this.payType = options.paytype?JSON.parse(options.paytype):'';
    this.orderIndex = options.index;
  },
  onShow:function() {
    uni.showLoading();
    this.isUseCash = false; // 重置现金券开关
    this.getOrderDetail()
  },
  onBackPress (options) {
    if (options.from === 'navigateBack') {  
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      var prevPage = pages[pages.length - 2]; //上一个页面
      prevPage.$vm.getPreIndex = this.orderIndex;
    }
  },
  methods: {
    delectCurOrders () {
      let _self = this;
      uni.showModal({
        title: '',
        content: '确认删除订单吗?',
        confirmColor: '#F6DA99',
        cancelColor: '#434343',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading();
            deleteOrder({
              id : _self.orderId,
            }, (res) => {
              if (res.status == 0) {
                uni.showToast({
                  title:"删除成功！",
                  success: () => {
                    setTimeout(function () {
                      _self.isEdit = false;
                      uni.navigateBack();
                    }, 2000)
                  }
                })
              }
              uni.hideLoading();
            }, null, {showErrorMsg: true})
          } else {
            _self.isEdit = true;
          }
        }
      })
    },
    sureHarvest (item) {
      confirmOrder({id: item.orderDetailId}, (res) => {
        if (res.status == 0) {
          uni.showToast({
            title: '收货成功',
            icon: 'none'
          });
          this.getOrderDetail()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          }); 
        }
      })
    },
    logistics (item) { // 查看物流
      uni.navigateTo({
        url: '/pages/purchaseShop/logisticsDetail?id=' + item.orderDetailId
      })
    },
    cancelComPop () {
      this.commonPopInfo.show = false;
    },
    delectCartGoods () {
      cancelOrder({id: this.orderId}, (res) => {
        if (res.status == 0) {
          uni.showToast({
            title: '取消订单成功',
            icon: 'none'
          });
          this.getOrderDetail();
          this.commonPopInfo.show = false;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          }); 
        }
      })
    },
    cancelOrders () { // 取消订单
      this.commonPopInfo.show = true;
    },
    getCurDate() {
      // 获取当前的时间
      let currentTime =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ":" +
        new Date().getSeconds(); 
      this.curDate = this.turnTime(currentTime);
    },
    turnTime(t) {
      // 将日期转化成时间戳，对比当前时间
      var newstr = t.replace(/-/g, '/');
      var date = new Date(newstr);
      var time_str = date.getTime().toString();
      return time_str.substr(0, 10);
    },
    payClick () {
      let cash;
      if (this.isUseCash || this.orderData.cashUsed > 0) {
        cash = 1
      } else {
        cash = 0
      }
      uni.navigateTo({
        url: '/pages/purchaseShop/orderPay?payID=' + this.orderData.payId + '&orderMainId=' + this.orderData.orderMainId + '&isCash=' + cash + '&payMoney=' + this.computeMoney
      });
    },
    getOrderDetail() {
      let params = {
        id: this.orderId
      }
      orderDetail(params, (res) => {
        if (res.status == 0) {
          this.orderData = res.data
          this.goodType = this.orderData.type // 分区名B2B:B2C
          this.getComputeMoney()
          if (res.data.orderStatus == 0) {
            // 订单倒计时
            this.getCurDate();
            let orderTime = (this.turnTime(res.data.expiredTime));
            if (orderTime-this.curDate > 0) {
              this.getCountDown(orderTime-this.curDate)
            }
            OrderCost({id: this.orderId},(res) => {
              if (res.status == 0) {
                this.postageData = res.data;
                this.countTotalMoney = res.data.totalMoney
              }
            })
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          }); 
        }
        uni.hideLoading()
      })
    },
    getCountDown (intDiff) {
      // 倒计时
      this.timers = setInterval(() => {
        var day = 0,
            hour = 0,
            minute = 0,
            second = 0;//时间默认值
        if (intDiff > 0) {
          day = Math.floor(intDiff / (60 * 60 * 24));
          hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
          minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
          second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
        }
        if (day <= 9) day = '0' + day;
        if (hour <= 9) hour = '0' + hour;
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
        if (minute == '00' && second == '00') {
          clearInterval(this.timers);
          this.countDown = '00:00';
        } else {
          this.countDown = hour + ":" + minute + ":" + second;
        }
        intDiff--;
      }, 1000);
    },
    cashChange (e) {
      this.isUseCash = e.target.value;
      this.calcuAmount()
    },
    calcuAmount () {
      // 券不选择 选择现金券用totalMoney+邮费 - userCashCoupon
      if (this.isUseCash) {
        this.computeMoney = Number(this.orderData.productTotalPrices + this.orderData.postage) - Number(this.postageData.userCashCoupon);
        // this.countTotalMoney = Number(this.countTotalMoney) - Number(this.postageData.userCashCoupon);
      } else {
        this.computeMoney = Number(this.orderData.productTotalPrices) + Number(this.orderData.postage);
        // this.countTotalMoney = Number(this.countTotalMoney) + Number(this.postageData.userCashCoupon)
      }
    },
    copyOrder (order) {
      this.$copyText(order).then(function (e) {
        uni.showToast({
          title: '复制成功',
          icon:"none"
        })
      }, function (e) {
        uni.showToast({
          title: '复制失败',
          icon:"none"
        })
      })
    },
    getComputeMoney () {
      if (Number(this.orderData.cashUsed) > 0) {
        this.computeMoney = Number(this.orderData.productTotalPrices + this.orderData.postage) - Number(this.orderData.cashUsed);
      } else {
        this.computeMoney = Number(this.orderData.productTotalPrices) + this.orderData.postage;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.mgt24 {
  margin-top: 24rpx;
}
.orderState {
  padding: 0 60rpx;
  line-height: 132rpx;
  height: 132rpx;
  font-size: 36rpx;
  color: #ffffff;
  background: #ff3f28;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .flt-fr text {
    font-size: 28rpx;
    margin-right: 16rpx;
  }
}
.information {
  padding: 40rpx 34rpx;
  background: #ffffff;
  .information-cent {
    padding-left: 42rpx;
    background: url(../../static/image/icon/findStore.png) left top no-repeat;
    background-size: auto 30rpx;
    .my-information {
      font-size: 28rpx;
      line-height: 28rpx;
      color: #333333;
      font-weight: 500;
      margin-bottom: 22rpx;
      text {
        margin-left: 40rpx;
      }
    }
    .address {
      font-size: 24rpx;
      line-height: 30rpx;
      color: #999999;
    }
  }
}
.commodity {
  background: #ffffff;
  .title {
    padding: 0 30rpx;
    height: 112rpx;
    line-height: 112rpx;
    font-size: 28rpx;
    color: #333333;
    font-weight: 300;
    margin-bottom: 8rpx;
    text {
      background: url(../../static/image/goodDetail/fireIcon.png) left center no-repeat;
      background-size: auto 30rpx;
      padding-left: 46rpx;
    }
  }
  .commoditylist {
    display: flex;
    padding: 0 30rpx 30rpx 30rpx;
    margin-bottom: 28rpx;
    justify-content: space-between;
    flex-wrap: wrap;
    .img {
      image {
        width: 140rpx;
        height: 140rpx;
      }
    }
    .list_d{
      display: flex;
      width: 100%;
      justify-content: flex-end;
      .btn{
        margin-right: 10rpx;
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #F6DA99;
        background-color: #434343;
        font-size: 28rpx;
        border-radius: 160rpx;
        &.white {
          border: 1px solid #E1E1E1;
          background-color: #FFFFFF;
          color: #434343;
        }
      }
    }
    .commoditylist-text {
      width: 550rpx;
      display: flex;
      align-items: center;
      .commodity-information {
        padding: 0 28rpx;
        width: 378rpx;
        .commodity-title {
          font-size: 26rpx;
          color: #333333;
          line-height: 36rpx;
        }
        .commodity-Model {
          margin-top: 16rpx;
          background: #efefef;
          border-radius: 16rpx;
          padding: 0 20rpx;
          height: 32rpx;
          line-height: 32rpx;
          display: inline-block;
          font-size: 20rpx;
        }
      }
      .commodity-Price {
        .Price {
          font-size: 32rpx;
          color: #333333;
          line-height: 44rpx;
          font-weight: 600;
          text {
            font-size: 20rpx;
            vertical-align: baseline;
            margin-right: 4rpx;
          }
        }
        .number {
          text-align: right;
          font-size:20rpx;
          color: #666666;
        }
      }
    }
  }
  .Remarks {
    padding: 24rpx 30rpx 52rpx 30rpx;
    display: flex;
    .Remarks-title {
      font-size: 28rpx;
      color: #333333;
      font-size: 28rpx;
      margin-right: 28rpx;
    }
    .Remarks-text {
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
    }
  }
}
.PriceDetails {
  padding: 0 30rpx;
  background: #ffffff;
  .PriceDetails-li {
    width: 100%;
    overflow: hidden;
    padding: 30rpx 0;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .PriceDetails-title {
      font-size: 26rpx;
      line-height: 28rpx;
    }
    .PriceDetails-text {
      font-size: 28rpx;
      line-height: 28rpx;
      font-weight: 500;
      display: flex;
      .color{
        color: #FF7931;
        font-size: 28rpx;
      }
      .switch {
        margin-top: -16rpx;
      }
      .color-text{
        color: #CD4339;
        font-size: 30rpx;
        font-weight:400;
      }
    }
    &.text-right {
      justify-content: flex-end;
    }
  }
}
.orderInformation{
  padding: 0 30rpx 100rpx 30rpx;
  background: #FFFFFF;
  .orderInformation-li{
    display: flex;
    color: #333333;
    padding:32rpx 0 18rpx 0;
    .orderInformation-title{
      font-size: 26rpx;
      line-height: 28rpx;
    }
    .orderInformation-text{
      font-size: 28rpx;
      line-height: 28rpx;
      .copy {
        display: inline-block;
        padding: 6rpx 10rpx;
        background:rgba(238,238,238,1);
        border-radius:4px;
        font-size: 20rpx;
        color: #333333;
        text-align: center;
        margin-left: 24rpx;
      }
    }
  }
  
}
.bottom-button{
  background: #FFFFFF;
  height: 100rpx;
  line-height: 100rpx;
  border-top: 1px solid #F0F0F0;
  text-align: right;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 36rpx;
  box-sizing: border-box;
  view{
    min-width: 160rpx;
    display: inline-block;
    text-align: center;
    margin: 0 10rpx;
    border-radius:30rpx;
    height: 60rpx;
    line-height: 60rpx;
    border:1px solid rgba(221,221,221,1);
    font-size: 28rpx;
  }
  .color1{
    color: #666666;
  }
  .color2{
    color: #FFFFFF;
  }
  .comBtn {
    border: none;
    background-color: #434343;
    color: #F6DA99;
  }
}
</style>
